import React, { Component } from 'react';
import {
	AppRegistry,
	StyleSheet,
	Text,
	View
} from 'react-native';

/**
 * 生命周期的学习
 */
export default class LifeCycleComponent extends Component {
	//构造函数
	constructor(props) {
		super(props);
		console.log('-----constructor-----');
		this.state = {
			count: 0
		}
	}

	//Mounting(装载)之前
	componentWillMount() {
		console.log('-----装载之前componentWillMount-----');
	}

	componentDidMount() {
		console.log('----componentDidMount------');
	}

	//Updating (更新)
	componentWillReceiveProps(nextProps) {
		console.log('----Updating更新componentWillReceiveProps------');
	}

	shouldComponentUpdate(nextProps, nextState) {
		console.log('-----shouldComponentUpdate-----');
		return true;
	}

	//更新之前
	componentWillUpdate(nextProps, nextState) {
		console.log('-----更新之前componentWillUpdate-----');
	}

	//更新之后
	componentDidUpdate(prevProps, prevState) {
		console.log('-----更新之后componentDidUpdate-----');
	}

	//移除之前
	componentWillUnmount() {
		console.log('----移除之前componentWillUnmount------');
	}

	render() {
		console.log('-----render-----');
		return <View>
			<Text
				style={{ fontSize: 20, backgroundColor: 'gray' }}
				onPress={
					() => {
						this.setState({
							count: this.state.count + 1,
						})
					}
				}
			>
				Hello {this.props.name}, 有本事你打我啊~~~
		</Text>
			<Text style={{ fontSize: 20, backgroundColor: 'red' }}>生命周期 被打了{this.state.count}次</Text>
		</View>
	}
}
